<template>
    <div>
        <el-row>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="店铺名">
                    <el-select v-model="formInline.shopId" placeholder="请选择">
                        <el-option
                                v-for="item in testData"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="优惠券名称">
                    <el-input v-model="formInline.name" placeholder="请输入优惠券名称"></el-input>
                </el-form-item>
                <el-form-item label="优惠券类型">
                    <el-select v-model="formInline.type" placeholder="请选择">
                        <el-option
                                v-for="item in option1"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="使用平台">
                    <el-select v-model="formInline.platform" placeholder="请选择">
                        <el-option
                                v-for="item in option2"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleEdit">添加</el-button>
                </el-form-item>
            </el-form>

        </el-row>
        <el-row>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="#">
                </el-table-column>
                <el-table-column
                        prop="shopName"
                        label="店铺名">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="优惠券名称">
                </el-table-column>
                <el-table-column prop="type" label="优惠券类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type === 0"><el-button size="mini" type="info">全场赠券</el-button></span>
                        <span v-if="scope.row.type === 1"><el-button size="mini" type="primary">会员赠券</el-button></span>
                        <span v-if="scope.row.type === 2"><el-button size="mini" type="warning">消费赠券</el-button></span>
                    </template>
                </el-table-column>
                <el-table-column prop="platform" label="使用平台">
                    <template slot-scope="scope">
                        <span v-if="scope.row.platform === 0"><el-button size="mini" type="info">全部</el-button></span>
                        <span v-if="scope.row.platform === 1"><el-button size="mini"
                                                                         type="primary">移动</el-button></span>
                        <span v-if="scope.row.platform === 2"><el-button size="mini"
                                                                         type="warning">PC</el-button></span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="count"
                        label="数量">
                </el-table-column>
                <el-table-column
                        prop="amount"
                        label="金额">
                </el-table-column>
                <el-table-column
                        prop="perLimit"
                        label="每人限额">
                </el-table-column>
                <el-table-column prop="minPoint" label="使用门槛">
                    <template slot-scope="scope">{{ scope.row.minPoint ===0.0 ?'无门槛': '会员可用'}}
                    </template>
                </el-table-column>
                <el-table-column prop="startTime" label="开始时间">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{(scope.row.startTime.split(` `)[0])}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="endTime" label="结束时间">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{(scope.row.endTime.split(` `)[0])}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="publishCount"
                        label="发行数量">
                </el-table-column>
                <el-table-column
                        prop="receiveCount"
                        label="已领取数">
                </el-table-column>
                <el-table-column
                        prop="useCount"
                        label="已使用数">
                </el-table-column>
                <el-table-column
                        prop="note"
                        label="备注">
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[2,3,5,10]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-row>
        <el-dialog title="优惠券管理" :visible.sync="dialogVisible" width="40%">
            <div>
                <el-form ref="form" :model="form" label-width="100px" :rules="rules">
                    <el-form-item label="店铺名">
                        <el-select v-model="form.shopId" placeholder="请选择">
                            <el-option label="请选择" :value="0">
                            </el-option>
                            <el-option
                                    v-for="item in testData"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-input v-model="form.id" style="display: none"></el-input>
                    <el-form-item label="优惠券名称" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="优惠券数量" prop="count">
                        <el-input v-model.number="form.count"></el-input>
                    </el-form-item>
                    <el-form-item label="优惠券金额" prop="amount">
                        <el-input v-model.number="form.amount"></el-input>
                    </el-form-item>
                    <el-form-item label="每人限额" prop="perLimit">
                        <el-input v-model.number="form.perLimit"></el-input>
                    </el-form-item>
                    <el-form-item label="发行数量" prop="publishCount">
                        <el-input v-model.number="form.publishCount"></el-input>
                    </el-form-item>
                    <el-form-item label="优惠码" prop="code">
                        <el-input v-model.number="form.code"></el-input>
                    </el-form-item>
                    <el-form-item label="优惠券类型">
                        <el-radio-group v-model="form.type">
                            <el-radio :label="0">全场赠券</el-radio>
                            <el-radio :label="1">会员赠券</el-radio>
                            <el-radio :label="2">消费赠券</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="使用平台">
                        <el-radio-group v-model="form.platform">
                            <el-radio :label="0">全部</el-radio>
                            <el-radio :label="1">移动端</el-radio>
                            <el-radio :label="2">PC</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="使用门槛">
                        <el-radio-group v-model="form.minPoint">
                            <el-radio :label="0">无门槛</el-radio>
                            <el-radio :label="1">仅限会员</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="使用类型">
                        <el-radio-group v-model="form.useType">
                            <el-radio :label="0">全场通用</el-radio>
                            <el-radio :label="1">指定类型</el-radio>
                            <el-radio :label="2">指定车辆</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="开始日期" prop="startTime">
                        <el-date-picker
                                v-model="form.startTime"
                                type="date"
                                placeholder="选择上线日期时间"
                                :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss"
                                format="yyyy-MM-dd HH:mm">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束日期" prop="endTime">
                        <el-date-picker
                                v-model="form.endTime"
                                type="date"
                                placeholder="选择上线日期时间"
                                :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss"
                                format="yyyy-MM-dd HH:mm">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="领取结束日期" prop="enableTime">
                        <el-date-picker
                                v-model="form.enableTime"
                                type="date"
                                placeholder="选择日期"
                                :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss"
                                format="yyyy-MM-dd HH:mm">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="可领取的会员类型" prop="memberLevel">
                        <el-select v-model="form.memberLevel" placeholder="请选择">
                            <el-option :label="option.name" :value="option.id"></el-option>
                            <el-option
                                    v-for="item in memberLevel"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注" prop="note">
                        <el-input v-model.number="form.note"></el-input>
                    </el-form-item>
                </el-form>

            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitPopForm('form')">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            let number1 = (rule, value, callback) => {
                if (value < 1) {
                    return callback(new Error('不能小于1'))
                } else if (value > 100000) {
                    return callback(new Error('不能大于100000'))
                }
            }
            let number2 = (rule, value, callback) => {
                if (value < 0) {
                    return callback(new Error('不能小于0'))
                } else if (value > 100000) {
                    return callback(new Error('不能大于100000'))
                }
            }
            let startTime1 = (rule, value, callback) => {
                let v = new Date(value).getTime();
                let s = new Date().getTime();
                if (v - s < -24 * 60 * 60 * 1000) {
                    return callback(new Error('不能选择今天以前'))
                }
            }
            let endTime1 = (rule, value, callback) => {
                let v = new Date(value).getTime();
                let s = new Date(this.form.startTime).getTime();
                if (this.form.startTime == null || this.form.startTime === '') {
                    return callback(new Error('请先选择开始时间'))
                }
                if (v - s < 24 * 60 * 60 * 1000) {
                    return callback(new Error('请选择开始时间之后的时间'))
                }
            }
            let enableTime1 = (rule, value, callback) => {
                let timestamp = new Date(value).getTime()
                let start = new Date(this.form.startTime).getTime()
                let end = new Date(this.form.endTime).getTime()
                if (this.form.startTime == null || this.form.startTime === '') {
                    return callback(new Error('请先选择开始时间'))
                }
                if (this.form.endTime == null || this.form.startTime === '') {
                    return callback(new Error('请先选择结束时间'))
                }
                if (end < timestamp || timestamp < start + 24 * 60 * 60 * 1000) {
                    callback(new Error(`请在值班时间内选择`))
                }
            }
            return {
                tableData: [],
                testData: [],
                memberLevel: [],
                option1: [
                    {label: "全场赠券", value: 0},
                    {label: "会员赠券", value: 1},
                    {label: "消费赠券", value: 2},
                    {label: "注册赠券", value: 3}
                ],
                option2: [
                    {label: "通用", value: 0},
                    {label: "移动", value: 1},
                    {label: "PC", value: 2},
                ],
                option: {
                    name: "无门槛", id: 0
                },
                sex: '',
                level: '',
                status: '',
                currentPage: 1,
                total: 100,
                formInline: {name: ``, shopId: ``, type: ``, platform: ``},
                pageSize: 5,
                dialogVisible: false,
                isEndTime: false,
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                rules: {
                    shopId: [
                        {required: true, message: '请选择店铺名', trigger: ['change', 'blur']}
                    ],
                    type: [
                        {required: true, message: '请选择优惠券类型', trigger: 'change'}
                    ],
                    name: [
                        {required: true, message: '请输入优惠券名称', trigger: 'blur'}
                    ],
                    platform: [
                        {required: true, message: '请选择使用平台', trigger: ['change', 'blur']}
                    ],
                    count: [
                        {required: true, message: '数量不能为空'},
                        {type: 'number', message: '数量必须为数字值'},
                        {validator: number1, trigger: ['change', 'blur']}
                    ],
                    amount: [
                        {required: true, message: '不能为空'},
                        {type: 'number', message: '必须为数字值'},
                        {validator: number1, trigger: ['change', 'blur']}
                    ],
                    perLimit: [
                        {required: true, message: '不能为空'},
                        {type: 'number', message: '必须为数字值'},
                        {validator: number1, trigger: ['change', 'blur']}
                    ],
                    minPoint: [
                        {required: true, message: '不能为空'},
                        {type: 'number', message: '必须为数字值'},
                        {validator: number2, trigger: ['change', 'blur']}
                    ],
                    startTime: [
                        {required: true, message: '请选择日期', trigger: 'change'},
                        {validator: startTime1, trigger: ['change', 'blur']}
                    ],
                    endTime: [
                        {required: true, message: '请选择时间', trigger: 'change'},
                        {validator: endTime1, trigger: ['change', 'blur']}
                    ],
                    useType: [
                        {required: true, message: '请选择使用类型', trigger: ['change', 'blur']}
                    ],
                    enableTime: [
                        {required: true, message: '请选择时间', trigger: 'change'},
                        {validator: enableTime1, trigger: ['change', 'blur']}
                    ],
                    code: [
                        {required: true, message: '不能为空'},
                    ],
                    publishCount: [
                        {required: true, message: '不能为空', trigger: ['change', 'blur']},
                    ]
                },
                form: {
                    id: 0,
                    shopId: 0,
                    type: 0,
                    name: "",
                    platform: 0,
                    count: 0,
                    amount: 0.0,
                    perLimit: 0,
                    minPoint: 0.0,
                    startTime: "",
                    endTime: "",
                    useType: 0,
                    note: "",
                    publishCount: 0,
                    useCount: 0,
                    receiveCount: 0,
                    enableTime: "",
                    code: "",
                    memberLevel: 0
                },
            }
        },
        // 初始化数据  mounted()
        created: function () {
            this.loadData();
            this.loadCarShop();
            this.loadMemberLevel();
        },
        methods: {
            //封装数据请求
            loadData() {
                let _this = this;
                this.$http.post("/ms/coupon/queryAll?pageNo=" + this.currentPage + "&pageSize=" + this.pageSize + "", this.formInline)
                    .then((response) => {
                        _this.tableData = response.data.t.list;
                        _this.total = response.data.t.total;
                    })
            },
            loadCarShop() {
                this.$http.post('cs/shop/queryAll?pageSize=1000&pageNum=1', {}).then((resp) => {
                    this.testData = resp.data.t.list;
                })
            },
            loadMemberLevel() {
                this.$http.post("/ms/memberLevel/queryAll?pageNo=1&pageSize=100", {}).then((resp) => {
                    this.memberLevel = resp.data.t.list
                })
            },
            //处理编辑
            handleEdit(index, row) {
                this.form = {
                    id: 0,
                    shopId: 0,
                    type: 0,
                    name: "",
                    platform: 0,
                    count: 0,
                    amount: 0.0,
                    perLimit: 0,
                    minPoint: 0.0,
                    startTime: "",
                    endTime: "",
                    useType: 0,
                    note: "",
                    publishCount: 0,
                    useCount: 0,
                    receiveCount: 0,
                    enableTime: "",
                    code: "",
                    memberLevel: 0
                }
                this.dialogVisible = true;
                if(row!==undefined){
                    this.form = JSON.parse(JSON.stringify(row))
                }
            },
            //处理删除
            handleDelete(index, row) {
            },
            //分页 每页数量变化时处理
            handleSizeChange(val) {
                this.pageSize = val;
                this.currentPage = 1;
                this.loadData();
            },
            //分页 第几页变化时处理
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadData();
            },
            //点击查询方法
            onSubmit() {
                this.currentPage = 1;
                this.loadData();
                this.formInline.shopId = ''
                this.formInline.name = ''
                this.formInline.type = ''
                this.formInline.platform = ''
            },
            //提交表单
            submitPopForm(form) {
                console.log(this.$refs[form])
                console.log(`if之前`)
                /* this.$refs[form].validate((valid) => {
                     console.log(`if之中`)
                     if (valid) {
                         console.log(`提交`)
                         if (Number(this.form.id) !== 0) {
                             this.$http.put("/ms/coupon/update", this.form).then((resp) => {
                                 if (Number(resp.data.resultCode) === 2000) {
                                     this.$message({
                                         message: '修改成功',
                                         type: 'success'
                                     })
                                     this.currentPage = 1;
                                     this.loadData();
                                 }
                                 if (Number(resp.data.resultCode) === 5000) {
                                     this.$message({
                                         message: '修改失败',
                                         type: 'error'
                                     })
                                 }
                             })
                         }
                         else {
                             this.$http.post("/ms/coupon/insert", this.form).then((resp) => {
                                 if (Number(resp.data.resultCode) === 2000) {
                                     this.$message({
                                         message: '添加成功',
                                         type: 'success'
                                     })
                                     this.currentPage = 1;
                                     this.loadData();
                                 }
                                 if (Number(resp.data.resultCode) === 5000) {
                                     this.$message({
                                         message: '添加失败',
                                         type: 'error'
                                     })
                                 }
                             })
                         }
                         this.dialogVisible = false;
                     }
                 })*/
                if (Number(this.form.id) !== 0) {
                    this.$http.put("/ms/coupon/update", this.form).then((resp) => {
                        if (Number(resp.data.resultCode) === 2000) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            })
                            this.currentPage = 1;
                            this.loadData();
                        }
                        if (Number(resp.data.resultCode) === 5000) {
                            this.$message({
                                message: '修改失败',
                                type: 'error'
                            })
                        }
                    })
                }
                else {
                    this.$http.post("/ms/coupon/insert", this.form).then((resp) => {
                        if (Number(resp.data.resultCode) === 2000) {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            })
                            this.currentPage = 1;
                            this.loadData();
                        }
                        if (Number(resp.data.resultCode) === 5000) {
                            this.$message({
                                message: '添加失败',
                                type: 'error'
                            })
                        }
                    })
                }
                this.dialogVisible = false;
            },
        }
    }
</script>

<style scoped>

</style>